<template>
  <div class="container">
    <div v-show="!showDetails">
      <!-- 搜索 -->
      <table>
        <tr>
          <th>
            <span>校区：</span>
            <el-button
              @click="openCompusList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="compusSelect">{{compusSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <span>功能区：</span>
            <el-button
              @click="openAreaList = true"
              type="text"
              style="width: 250px; text-align: left;"
            >
              <span v-if="areaSelect">{{areaSelect.name}}</span>
              <span v-else>未选择</span>
            </el-button>
          </th>
          <th>
            <el-button type="primary" icon="el-icon-search" @click="getClassroom">搜索</el-button>
          </th>
        </tr>
      </table>
      <hr />
      <!-- 课室表格 -->
      <el-table
        :data="classroomTable.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        border
        @row-click="rowClick"
      >
        <el-table-column prop="school_name" label="校区名称"></el-table-column>
        <el-table-column prop="area_name" label="功能区名称"></el-table-column>
        <el-table-column prop="name" label="课室名称"></el-table-column>
        <el-table-column prop="field_type_name" label="类型"></el-table-column>
        <el-table-column prop="available_volumn" label="可容纳人数"></el-table-column>
      </el-table>
      <br />
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        style="margin-left: 30%;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
      <div>
        <!-- 学院筛选 -->
        <el-dialog title="选择学院" :visible.sync="openCompusList">
          <el-input placeholder="请输入关键字" v-model="compusKeyword">
            <template slot="prepend">学院名</template>
            <el-button slot="append" icon="el-icon-search" @click="getCompusByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="compusSelect">
            <el-radio
              v-for="(compus, index) in compusList"
              :key="'compus' + index"
              :label="compus"
              style="margin:10px;"
            >{{ compus.name }}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="compusSelect=''">清 空</el-button>
            <el-button type="primary" @click="compusSelected">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 功能区筛选 -->
        <el-dialog title="选择功能区" :visible.sync="openAreaList">
          <el-input placeholder="请输入关键字" v-model="areaKeyword">
            <template slot="prepend">功能区名</template>
            <el-button slot="append" icon="el-icon-search" @click="getAreaByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="areaSelect">
            <el-radio
              v-for="(area, index) in areaList"
              :key="'area' + index"
              :label="area"
              style="margin:10px;"
            >{{ area.name }}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="areaSelect=''">清 空</el-button>
            <el-button type="primary" @click="areaSelected">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 详情组件 -->
    <div v-show="showDetails">
      <classroomDetails :classroomDetails="classroomDetails" @closeDetails="closeDetails" />
    </div>
  </div>
</template>

<script>
import classroomDetails from "@/views/education-instructionalMatters/classroom/details";

export default {
  name: "Classroom",
  data() {
    return {
      tableTotal: 0,
      currentPage: 1,
      pagesize: 10,

      classroomTable: [], //所有课室的列表

      showDetails: false, //显示详情组件
      classroomDetails: {}, //用户点击行的课室详细信息

      openCompusList: false, //校区筛选对话框显示
      compusSelect: "", //校区选择
      compusList: [], //校区列表
      compusKeyword: "", //关键词搜索

      openAreaList: false, //功能区筛选对话框显示
      areaSelect: "", //功能区选择
      areaList: [], //功能区列表
      areaKeyword: "", //关键词搜索
    };
  },
  components: {
    classroomDetails,
  },
  // 加载页面时执行
  created() {
    //获取所有教室列表
    this.getAllClassroom();
    //获取所有校区的列表
    this.getCompusList();
    //获取功能区的列表
    this.getAreaList();
  },
  methods: {
    // 获取所有课室信息
    getAllClassroom() {
      this.classroomTable = [
        {
          id: "0010101",
          college_id: "1010101001",
          create_time: "2020-2-2",
          by_who: "201724113132",
          name: "第一教学楼101",
          english_name: "The first teaching building 101",
          available_volumn: "60",
          row_number: "6",
          column_number: "10",
          maxCapcity: "120",
          currentCapcity: "0",
          school_id: "1234",
          area_id: "1234",
          field_type_name: "传统教室",
          school_name: "主校区",
          area_name: "第一教学楼",
        },
        {
          id: "0010102",
          college_id: "1010101001",
          create_time: "2020-2-2",
          by_who: "201724113132",
          name: "第一教学楼102",
          english_name: "The first teaching building 102",
          available_volumn: "60",
          row_number: "6",
          column_number: "10",
          maxCapcity: "120",
          currentCapcity: "0",
          school_id: "1234",
          area_id: "1234",
          field_type_name: "传统教室",
          school_name: "主校区",
          area_name: "第一教学楼",
        },
        {
          id: "0010103",
          college_id: "1010101001",
          create_time: "2020-2-2",
          by_who: "201724113132",
          name: "第一教学楼103",
          english_name: "The first teaching building 103",
          available_volumn: "120",
          row_number: "12",
          column_number: "10",
          maxCapcity: "120",
          currentCapcity: "0",
          school_id: "1234",
          area_id: "1234",
          field_type_name: "传统教室",
          school_name: "主校区",
          area_name: "第一教学楼",
        },
        {
          id: "0010104",
          college_id: "1010101001",
          create_time: "2020-2-2",
          by_who: "201724113132",
          name: "第一教学楼104",
          english_name: "The first teaching building 104",
          available_volumn: "120",
          row_number: "12",
          column_number: "10",
          maxCapcity: "120",
          currentCapcity: "0",
          school_id: "1234",
          area_id: "1234",
          field_type_name: "传统教室",
          school_name: "主校区",
          area_name: "第一教学楼",
        },
      ];
    },

    // 获取功能区列表
    getAreaList() {
      this.areaList = [
        { id: "1", name: "第一教学楼" },
        { id: "2", name: "第二教学楼" },
        { id: "3", name: "第三教学楼" },
      ];
    },

    // 获取校区列表
    getCompusList() {
      this.compusList = [
        { id: "1", name: "星湖" },
        { id: "2", name: "北岭山校区" },
      ];
    },

    //根据校区和功能区搜索课室
    getClassroom() {},

    //根据关键词搜索学院
    getCompusByKeyword() {},

    //根据关键词搜索功能区
    getAreaByKeyword() {},

    //选择学院
    compusSelected() {
      this.openCompusList = false;
    },

    //选择功能区
    areaSelected() {
      this.openAreaList = false;
    },

    // 点击列表某行,获取该行的所有课室信息,跳转到详情页面
    rowClick(val) {
      this.classroomDetails = val;
      this.showDetails = true;
    },

    //子组件课程详情组件传回来的数据,
    closeDetails(val) {
      this.showDetails = val;
    },

    // 换页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
tr {
  height: 40px;
}
</style>
